<template>
  <div>
    <div v-show="showBlur" class="blur-background">
      <div class="blur-box">
        <span class="close-button" @click="closeModal">×</span>

      </div>
    </div>
    <!-- 其他内容 -->
  </div>
</template>

<script>
export default {
  props: {
    showBlur: Boolean
  },
  methods: {
    closeModal() {
      this.$emit('close');
    }
  }
}
</script>

<style>
.blur-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* 全屏覆盖 */
  /* backdrop-filter: blur(5px);  */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001; /* 确保在其他元素之上 */;
}

.blur-box {
  width: 50%;
  min-height: 50%;
  background: rgba(13, 43, 85, 0.9);
  border: 1px solid #2997e4;
  position: relative;
  padding: 20px;
}
.blur-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  z-index: 1002;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 20px;
  /* color: #fff;  */
  text-shadow: 0 0 3px rgba(0,0,0,0.5); /* 添加文字阴影 */
  z-index: 1002; /* 确保按钮在最上层 */
}
</style>
